<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup>
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef()
const getBaseOptions = () => {
  return {
    color: ['#00D9FF', '#FAD760', '#23EBC2'],
    grid: {
      top: 10,
      bottom: 10,
      left: 0,
      right: 0,
      containLabel: true
    },
    legend: {
      textStyle: {
        color: '#fff'
      },
      bottom: 0,
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      borderColor: '#fff'
    },
    series: [
      {
        name: 'ring',
        type: 'pie',
        center: ['50%', '40%'],
        radius: ['40%', '60%'],
        label: {
          color: '#fff',
          formatter: '{d}%'
        },
        labelLine: {
          length: 10,
          length2: 6
        },
        data: [
          { value: 335, name: '数据1' },
          { value: 310, name: '数据2' },
          { value: 234, name: '数据3' }
        ]
      }
    ]
  }
}
onMounted(() => {
  nextTick(() => {
    const option = getBaseOptions()
    options.value = option
  })
})
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 2.7rem;
}
</style>
